<template>
	<view class="content">
		<view class="rili">
			<uni-calendar
				:insert="true"
				:lunar="false"
				:start-date="'2019-3-2'"
				:end-date="'2090-9-9'"
				:range="true"
				@change="calChange"
				@monthSwitch="flgMm"
				:selected="selected"
			></uni-calendar>
		</view>
		<u-picker
			v-model="isShowDt1"
			mode="time"
			:params="params"
			@confirm="confirmSelection1()"
			:default-time="oneTime"
		></u-picker>
		<u-picker
		
			v-model="isShowDt"
			mode="time"
			:params="params"
			@confirm="confirmSelection()"
			:default-time="twoTime"
		></u-picker>
		<view class="date" @click="turnOnPicker(1)">
			<view class="left"><text>开始日期</text></view>
			<view class="right">
				<text v-if="!oneTime">{{ this.oneTime }}</text>
				<text v-else>{{oneTime}}</text>
			</view>
		</view>
		<view class="date" @click="turnOnPicker(0)">
			<view class="left"><text>结束日期</text></view>
			<view class="right">
				<text v-if="!twoTime">{{ this.twoTime }}</text>
				<text v-else>{{twoTime}}</text>
			</view>
		</view>

		<view class="box">
			<view class="text">是否可租 :</view>
			<u-radio-group v-model="hireValue" @change="radioGroupChange">
				<u-radio
					@change="radioChange"
					v-for="(item, index) in hireList"
					:key="index"
					:name="item.name"
					:disabled="item.disabled"
					shape="square"
					active-color="#B50000"
				>
					<text style="color: #FFFFFF">{{ item.name }}</text>
				</u-radio>
			</u-radio-group>
		</view>
		<view class="box">
			<view class="text">是否限行 :</view>
			<u-radio-group v-model="limLineValue" @change="radioGroupChange1">
				<u-radio
					@change="radioChange1"
					v-for="(item, index) in limLineList"
					:key="index"
					:name="item.name"
					:disabled="item.disabled"
					shape="square"
					active-color="#B50000"
				>
					<text style="color: #FFFFFF">{{ item.name }}</text>
				</u-radio>
			</u-radio-group>
		</view>
		<view class="box">
			<view class="text">是否维修 :</view>
			<u-radio-group v-model="serviceValue" @change="radioGroupChange2">
				<u-radio
					@change="radioChange2"
					v-for="(item, index) in serviceList"
					:key="index"
					:name="item.name"
					:disabled="item.disabled"
					shape="square"
					active-color="#B50000"
				>
					<text style="color: #FFFFFF">{{ item.name }}</text>
				</u-radio>
			</u-radio-group>
		</view>
		<view class="bottom" @click="submit">确认提交</view>
	</view>
</template>

<script>
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
export default {
	components: {
		uniCalendar
	},
	data() {
		return {
			isShowDt: false,
			isShowDt1: false,
			params: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false
			},
			cid: '',
			
			hireList: [
				{
					name: '可租用',
					disabled: false
				},
				{
					name: '不可租',
					disabled: false
				}
			],
			hireValue: '可租用',
			limLineList: [
				{
					name: '未限行',
					disabled: false
				},
				{
					name: '已限行',
					disabled: false
				}
			],
			limLineValue: '未限行',
			serviceList: [
				{
					name: '维修中',
					disabled: false
				},
				{
					name: '正常',
					disabled: false
				}
			],
			serviceValue: '正常',
			discount_time: [],
			d_arr: [],
			day: [],
			status: 1,
			is_use: 0,
			is_trim: 0,
			oneTime: '',
			twoTime: '',
			selected:[]
			
		};
	},
	onLoad(e) {
		console.log('e :>> ', e);
		this.cid = e.cid;
		this.getVehData(e.cid);
		this.getCal()
		
	},
	methods: {
		async flgMm(e) {
			let month = `${e.year}-${e.month}`;
			let obj = {
				cid: this.cid,
				month,
			};
			const res = await this.$u.post('api/car/calendar', obj, {});
			console.log('res >>  ', res);
			this.selected = res.data;
		},
		// 获取日历
		async getCal() {
			const res = await this.$u.post('api/car/calendar', {
				cid: this.cid,
				month: 0
			});
			this.selected = res.data;
			this.$forceUpdate()
			console.log('this.selected :>> ', this.selected);
		},
		confirmSelection1(e) {
			this.oneTime = e.year + '-' + e.month + '-' + e.day 
			console.log('this.oneTime  :>> ', this.oneTime);
		},
		confirmSelection(e) {
			this.twoTime = e.year + '-' + e.month + '-' + e.day 
		},
		turnOnPicker(i) {
			if (i) {
				this.isShowDt1 = true;
			} else {
				this.isShowDt = true;
			}
		},
		async submit() {
			
			let obj = {
				cid: this.cid,
				day:[this.oneTime,this.twoTime], // 时间段
				status: this.status, // 0否 1可租
				is_use: this.is_use, // 0 1限行
				is_trim: this.is_trim // 0否 1维修
			};
			
			const res = await this.$u.post('api/user/admin_car_update', obj);
			console.log('res >>  ', res);
			this.getCal()
			if (res.code == 1) return uni.$showMsg(res.msg);
			
		},
		async getVehData(id) {
			const res = await this.$u.post('api/user/user_admin_edit', {
				cid: id
			});
			console.log('res :>> ', res);
			this.discount_time = res.data.rent_time;
			console.log('this.discount_time :>> ', this.discount_time);
			this.oneTime =  res.data.rent_time[0].split(' ')[0]
			this.twoTime =  res.data.rent_time[1].split(' ')[0]
			
			//this.get();
		},
		get() {
			console.log('this.discount_time :>> ', this.discount_time);
			if (this.discount_time) {
				var start_time = this.discount_time[0].split(' ')[0];
				var end_time = this.discount_time[1].split(' ')[0];
			}
			
			var bd = new Date(start_time),
				be = new Date(end_time);
			var bd_time = bd.getTime(),
				be_time = be.getTime(),
				time_diff = be_time - bd_time;
			var d_arr = [];
			//ds.getMonth()

			for (var i = 0; i <= time_diff; i += 86400000) {
				var ds = new Date(bd_time + i);
				var month = Number(ds.getMonth()) + 1;
				d_arr.push(ds.getFullYear() + '-' + month + '-' + ds.getDate());
			}
			this.d_arr = d_arr;
			console.log('this.d_arr :>> ', this.d_arr);
			d_arr.forEach((e, i) => {
				var obj = {
					date: e,
					info: '修改'
				};
				this.selected.push(obj);
			});
			console.log('this.selected :>> ', this.selected);
		},

		radioChange(e) {
			// console.log(e);
		},

		radioGroupChange(e) {
			console.log(e);
			if (e == '可租用') {
				this.status = 1;
			} else {
				this.status = 0;
			}
		},

		radioChange1(e) {
			// console.log(e);
			// 陈丽
			// 杨柳
		},

		radioGroupChange1(e) {
			console.log(e);
			if (e == '未限行') {
				this.is_use = 0;
			} else {
				this.is_use = 1;
			}
		},

		radioChange2(e) {
			// console.log(e);
		},

		radioGroupChange2(e) {
			console.log(e);
			if (e == '正常') {
				this.is_trim = 0;
			} else {
				this.is_trim = 1;
			}
		},
		calChange(e) {
			console.log('e :>> ', e);
			// if (e.range.data.length !== 0) {
			// 	this.day[0] = e.range.data[0];
			// 	this.day[1] = e.range.data[e.range.data.length - 1];
			// } else {
			// 	this.day[0] = e.fulldate;
			// 	this.day[1] = e.fulldate;
			// }
			// this.list.sort(function(){
			// 	return Math.random()-0.5
			// })
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	padding: 20rpx;
	padding-bottom: 150rpx;
	.date {
		background-color: #242424;
		border-radius: 15rpx;
		padding: 10rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		margin-top: 20rpx;

		.right {
			flex: 2;
		}

		.left,
		.right {
			padding: 15rpx;
			line-height: 50rpx;
			color: #dadada;
		}
	}
	.rili {
		border-radius: 10rpx;
	}
	.box {
		display: flex;
		align-items: center;
		height: 75rpx;
		.text {
			color: #ffffff;
			font-size: 35rpx;
			margin-right: 25rpx;
		}
	}
	.bottom {
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 710rpx;
		height: 100rpx;
		background: #880000;
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		font-size: 38rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #ffffff;
	}
}
</style>
